@require "../../css/variables.styl"
@require "../../css/mixin.styl"

.va-df-input-inner-wrapper
.va-df-input-wrapper
.va-df-complex-field-wrapper
.va-df-repeat-item-wrapper
  relative()

.va-df-input-pending
  absolute()
  font-size 12px
  right 4px
  top 50%
  margin-top -6px
  z-index 10
  line-height 1
  color #000
  background rgba(#fff, .8)

.va-df-input-loading
  opacity .8

.va-df-input-loading-mask
  abs-full()
  i
    font-size 14px
    line-height 1
    abs-center(@font-size, @font-size)

.va-df-form-group
  margin-bottom: 10px;

.va-df-complex-field-wrapper
  padding 10px


.va-df-input-group
  relative()
  display flex
.va-df-input-group > .va-df-input-inner-wrapper
  flex 1
  min-width 0
  width 0

.va-df-input-group-addon
  padding 0 10px
  font-size 14px
  font-weight 400
  color #555
  text-align $color-df-input-group-addon-font
  background-color $color-df-input-group-addon-background
  f-border($color-df-input-border)

  display inline-flex
  flex-flow column
  justify-content center

  &:first-child
    border-right 0
  &:last-child
    border-left 0

.va-df-complex-form-group
.va-df-form-group
  .va-df-control-label
    height $height-df-input-default
  .va-df-input-control
    padding $padding-df-input-default
    height $height-df-input-default

.va-df-input-control
  width 100%
  display block
  font-size $font-size-df-input

  line-height 1.5
  f-border($color-df-input-border)
  f-placeholder()
  form-control-focus()
  transition border-color ease-in-out .15s, box-shadow ease-in-out .15s

  &::-ms-expand
    border 0
    background-color transparent

  &[disabled]
  &[readonly]
    background-color $color-df-input-disable-background
    opacity 1

  &[disabled]
    cursor not-allowed

.va-df-form-inline
  p
    display inline
    margin-right 10px
  .va-df-input-control
    width inherit
  .va-df-complex-form-group
  .va-df-button-wrapper
    display inline
    .va-df-complex-field-wrapper
      display inline
      padding 0
    >.va-df-control-label
      display inline-block
      padding-bottom inherit
      border-bottom none
  >.va-df-form-group
    display inline-flex !important
    margin-right 10px
